<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4" >
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link th:href="@{/css/admin/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/admin/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/css/admin/css/style.min.css}" rel="stylesheet">

    <!--    导入layui组件，优秀的弹窗框架-->
    <link rel="stylesheet" th:href="@{/plugins/layui-v2.6.8/layui/css/layui.css}">
</head>
<body>

<!--<div th:text="${user}">-->

</div>
<main class="lyear-layout-content" style="margin: 0;padding: 0">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="edit-avatar">

                            <img th:if="${user.headPortrait}== null" id="userImg" th:src="@{/image/logo.jpg}" alt="..." class="img-avatar">
                            <img th:if="${user.headPortrait}!= null" id="userImg" th:src="${user.headPortrait}" alt="..." class="img-avatar">

                            <div class="avatar-divider"></div>
                            <div class="edit-avatar-content">
                                <div sec:authorize="isAuthenticated()">
                                    <div sec:authorize="hasAuthority('admin')">
                                        <button class="btn btn-default" onclick="openChoice()">修改头像</button>
                                    </div>
                                    <div sec:authorize="!hasAuthority('admin')">
                                        <button class="btn btn-default" onclick="uploadPicture()">修改头像</button>
                                    </div>

                                </div>

<!--                                <input type="text" >-->
<!--                                <p class="m-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>-->
                            </div>
                        </div>
                        <hr>
                        <form method="post" action="/update" class="site-form">
<!--                            选择头像，的路径和名字-->
                            <input type="hidden" class="form-control" id="articleThumbnail" name="headPortrait" readonly="readonly">
                            <input type="hidden" class="form-control"  id="fileName" name="fileName" readonly="readonly">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" class="form-control"  th:value="${user.userName}" disabled="disabled" />
                                <input type="hidden"  name="userName" id="username" th:value="${user.userName}"  />
                            </div>
                            <div class="form-group">
                                <label for="nickname">昵称</label>
                                <input type="text" class="form-control" name="nickName" id="nickname" placeholder="输入您的昵称" th:value="${user.nickName}">
                            </div>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script type="text/javascript" th:src="@{/js/admin/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/admin/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/admin/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{/js/admin/main.min.js}"></script>
<!--    导入layui组件，优秀的弹窗框架-->
<script th:src="@{/plugins/layui-v2.6.8/layui/layui.js}"></script>
<script type="text/javascript">
    function openChoice(){
        layer.open({
            type : 2,
            title : '所有附件',
            anim : 2,
            area : [ '90%', '90%' ],
            maxmin : true,
            shadeClose: true,
            content : "/goUploadView"  //通过请求打开附件视图
        });
    }
    function uploadPicture() {
        var userName = $("#username").val()
        layer.open({
            type : 2,
            title : '上传头像',
            anim : 2,
            area : [ '80%', '80%' ],
            maxmin : true,
            shadeClose: true,
            content : "/goUploadUserView/"+userName  //用户上传图片
        });
        // alert("上传头像")
    }
</script>
</body>
</html>